<template>
    <view class="calender-component">
        <view class="calender-component-header flex-between-center">
            <text class="month fs-34">{{ year }} {{ month }}月</text>
            <view class="flex-center">
                <IconFont font-class-name="iconfont" class-prefix="icon" name="fi-rr-angle-small-left" size="16" class="btn"
                    @click="preMonth" />
                <IconFont font-class-name="iconfont" class-prefix="icon" name="fi-rr-angle-small-right" size="16"
                    class="btn" @click="nextMonth" />
            </view>
        </view>

        <view class="calender-component-container">
            <text class="flex-center day-item">
                一
            </text>
            <text class="flex-center day-item">
                二
            </text>
            <text class="flex-center day-item">
                三
            </text>
            <text class="flex-center day-item">
                四
            </text>
            <text class="flex-center day-item">
                五
            </text>
            <text class="flex-center day-item">
                六
            </text>
            <text class="flex-center day-item">
                七
            </text>
            <template v-for="item in 5">
                <button @click="selectDay(item2)"
                    :disabled="((item - 1) * 7 + item2 > monthDays)"
                    :class="{ 'flex-center': true, 'other-month': (item - 1) * 7 + item2 > monthDays, active: activedDay === (item - 1) * 7 + item2 }"
                    v-for="(item2, index2) in 7">
                    {{ currentDay(item, item2, monthDays) }}
                </button>
            </template>
        </view>
    </view>
</template>
<script setup>
import { IconFont } from '@nutui/icons-vue-taro';
import { computed, ref } from 'vue';

const activedDay = ref(new Date().getDate())
const month = ref(new Date().getMonth() + 1)
const year = ref(new Date().getFullYear())

console.log(activedDay)

const monthDays = computed(() => {
    return getMonthDays(month.value, year.value)
})

// 选择当天
function selectDay(day) {
    console.log(day)
}

function currentDay(item, item2, monthDays) {
    return (item - 1) * 7 + item2 > monthDays ? (item - 1) * 7 + item2 - monthDays : (item - 1) * 7 + item2
}

// 上个月
function preMonth() {
    if (month.value === 1) {
        month.value = 12
        year.value--
    } else {
        month.value--
    }
    activedDay.value = null
}
// 下个月
function nextMonth() {
    if (month.value === 12) {
        month.value = 1
        year.value++
    } else {
        month.value++
    }
    activedDay.value = null
}

/**
 * 
 * @param {中国月份} month 
 * @param {full年份} year 
 */
function getMonthDays(month, year) {
    /* 
一、1、3、5、7、8、10、12 每月31天，4、6、9、11为30天。

二、2月正常为28天，如果为闰年，则多一天为29天。

正如我们所说的顺口溜：一三五七八十腊，三十一天永不差。

要计算每月的天数，首页先确定当年前是否为闰年，首先明确 什么是闰年？规则如下：

1、能被4整除，但不能被100整除；

2、能被400整除；
*/
    if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
        return 31 // 31天
    } else if (month == 4 || month == 6 || month == 9 || month == 11) {
        return 30 // 天
    } else if (month == 2) {

        if ((year % 4 === 0 && year % 100 !== 0) && year % 400 === 0) {
            return 29 // 天
        } else {
            return 28 // 天
        }
    }
}
</script>
<style lang="scss">
.month {
    color: $color-base2;
}

.btn {
    color: $color-base3;
    width: 40px !important;
    height: 40px !important;
    display: block !important;
}

.active {
    background-color: #4178D4 !important;
    color: #fff;
}

.other-month {
    color: #CBD5E1 !important;
}

.calender-component {
    height: 100%;
    display: flex;
    flex-direction: column;

    &-header {
        margin-bottom: 36px;
    }

    &-container {
        flex: 1;
        height: 0;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(6, 1fr);
        align-items: center;
        justify-items: center;
        justify-content: center;

        button {
            background-color: transparent;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: none;
            outline: none;

            &::after {
                border: unset;
            }
        }

        .day-item {
            color: #0F172A;
        }
    }
}
</style>
